<script setup>
import { computed, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import Table from '@/components/Table/index.vue';
import Descriptions from '@/components/Descriptions/index.vue';
import { getPcbInfo } from '@/server/api/biz.js';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 订单详情表格标题
const columns = computed(() => [
  {
    label: t('om.OrderNo'),
    prop: 'serial',
  },
  {
    label: t('om.Timeoforder'),
    prop: 'createTime',
  },
  {
    label: t('om.Estimateddelivery'),
    prop: 'deliveryDay',
  },
  {
    label: t('om.OrderStatus'),
    prop: 'detail',
  },
]);

// STM信息描述列表标题
const smtColumns = computed(() => [
  {
    label: t('smt.chipLayer'),
    props: 'smtLayer',
  },
  {
    label: t('smt.patchQuantity'),
    props: 'smtNumber',
  },
  {
    label: '贴片点数',
    props: 'totalQuantiQty',
  },
  {
    label: '贴片器件种类',
    props: 'totalMaterialsType',
  },
  {
    label: '插件点数',
    props: 'pluginsNumber',
  },
  {
    label: '插件器件种类',
    props: 'pluginsType',
  },
  {
    label: t('smt.BOMFile'),
    props: 'bomFileName',
    isLink: true,
    func: () => downloadFile(),
  },
  {
    label: t('smt.Coordinatefile'),
    props: 'coordinateFileName',
    isLink: true,
    func: () => downloadFile(),
  },
]);

// PCB信息描述列表标题
const pcbColumns = computed(() => [
  {
    label: '板材类型',
    props: 'productCategoryName',
  },
  {
    label: '板子数量 ',
    props: 'orderPcbNumber',
  },
  {
    label: '板子层数',
    props: 'pcbLayer',
  },
  {
    label: '板子长度',
    props: 'pcbLength',
  },
  {
    label: '板子宽度',
    props: 'pcbWidth',
  },
  {
    label: '板子厚度',
    props: '4',
  },
  {
    label: '是否接受打叉',
    props: '5',
  },
  {
    label: '拼板数',
    props: '6',
  },
  {
    label: '产品类型',
    props: '7',
  },
  {
    label: '拼板方式',
    props: '8',
  },
  {
    label: '外层铜厚',
    props: '8',
  },
  {
    label: '内层铜厚',
    props: '8',
  },
  {
    label: '阻抗控制',
    props: '8',
  },
  {
    label: '阻焊颜色',
    props: '8',
  },
  {
    label: '字符颜色',
    props: '8',
  },
  {
    label: '阻焊覆盖',
    props: '8',
  },
  {
    label: '焊盘喷镀',
    props: '8',
  },
  {
    label: '沉金厚度',
    props: '8',
  },
  {
    label: '金手指',
    props: '8',
  },
  {
    label: '线路测试',
    props: '8',
  },
  {
    label: '是否接受打叉',
    props: '8',
  },
  {
    label: '四线低阻过孔',
    props: '8',
  },
  {
    label: '包装要求',
    props: '8',
  },
  {
    label: 'Gerber文件',
    props: '8',
    isLink: true,
    func: () => downloadFile(),
  },
]);

// 订单详情数据
const orderDetail = {
  1: 333333,
  2: 333333,
  3: 333333,
  4: 333333,
  5: 333333,
  6: 333333,
  7: 333333,
  8: '坐标文件1',
};

const data = reactive({
  orderId: '',
  orderName: '',
  orderTableData: [],
  smtOrderDetail: {
    smtLayer: '',
    smtNumber: '',
    totalQuantiQty: '',
    totalMaterialsType: '',
    pluginsNumber: '',
    pluginsType: '',
    bomFileName: '',
    coordinateFileName: '',
  },
  pcbOrderDetail: {},
  shippingAddress: {
    address: '',
    name: '',
    phone: '',
  },
  expressName: '',
  isShow: false,
  statusData: [],
  pcbPrice: 0,
  smtPrice: 0,
  bomPrice: 0,
  totalPrice: 0,
  deliveryDay: 0,
  expressAmount: 0,
});
const router = useRouter();
const route = useRoute();
data.orderId = route.query.id;
data.orderName = route.query.name;
data.statusData = JSON.parse(route.query.status);
if (data.orderName == 'SMT') {
  data.isShow = true;
} else {
  data.isShow = false;
}

onMounted(() => {
  getDetail();
});

const getDetail = () => {
  getPcbInfo(data.orderId).then((res) => {
    console.log(res);
    if (res.code === 200) {
      // orderDetail = res.data;
      const smtOrderDetail = res.data.crmPcbaSmtOrderVO;
      const expressVO = res.data.crmPcbaOrderExpressVO;

      data.smtOrderDetail.smtLayer = smtOrderDetail?.smtLayer;
      data.smtOrderDetail.smtNumber = smtOrderDetail?.smtNumber;
      data.smtOrderDetail.totalQuantiQty = smtOrderDetail?.totalQuantiQty;
      data.smtOrderDetail.totalMaterialsType = smtOrderDetail?.totalMaterialsType;
      data.smtOrderDetail.pluginsNumber = smtOrderDetail?.pluginsNumber;
      data.smtOrderDetail.pluginsType = smtOrderDetail?.pluginsType;
      data.smtOrderDetail.bomFileName = smtOrderDetail?.bomVO.fileName;
      data.smtOrderDetail.coordinateFileName = smtOrderDetail?.coordinateFileVO.fileName;

      data.shippingAddress.address = expressVO.expressAddress;
      data.shippingAddress.name = expressVO.expressUser;
      data.shippingAddress.phone = expressVO.expressPhone;

      data.expressName = expressVO.expressName;

      data.pcbPrice = res.data.crmPcbaPcbOrderVO?.orderPcbAmount;
      data.smtPrice =
        res.data.crmPcbaSmtOrderVO?.smtAmount + res.data.crmPcbaSmtOrderVO?.serviceAmount || 0;
      data.bomPrice = res.data.crmPcbaSmtOrderVO?.materialsAmount;
      data.deliveryDay = res.data.deliveryDay;
      data.expressAmount = res.data.expressAmount;
      data.totalPrice = res.data.realPayAmount;
      console.log(data.smtOrderDetail, 'data.smtOrderDetail');
      getTableData(res.data);
      getPcbData(res.data);
    }
  });
};

const getPcbData = (data) => {
  // pcbOrderDetail;
};

// 下载文件
const downloadFile = () => {
  alert('downloadFile');
};

/**
 * 获取重组表格数据
 */
const getTableData = (obj) => {
  const arr = [
    {
      serial: obj.serial,
      createTime: obj.createTime,
      deliveryDay: obj.deliveryDay,
      orderStatus: obj.orderStatus,
    },
  ];

  data.orderTableData = arr;
  console.log(data.orderTableData, 55555555555);
};

const goBack = () => {
  router.go(-1);
};
</script>
<template>
  <div class="wrapper">
    <div class="order-detail container">
      <div class="block-container">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">{{ data.orderName }}订单详情</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>
        <Table
          class="info-table"
          :data="data.orderTableData"
          :orderStatusObj="data.statusData"
          :columns="columns"
        >
        </Table>
      </div>
      <div class="block-container" v-if="data.isShow">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">SMT信息</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>
        <Descriptions :column="smtColumns" :data="data.smtOrderDetail"> </Descriptions>
      </div>
      <div class="block-container">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">{{ $t('om.PCBInfo') }}</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>
        <Descriptions :column="pcbColumns" :data="orderDetail"> </Descriptions>
      </div>
      <div class="block-container">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">{{ $t('smt.Shippingaddress') }}</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>

        <div class="m-b-20">
          <span
            >{{ data.shippingAddress.address }} {{ data.shippingAddress.name }}
            {{ data.shippingAddress.phone }}
          </span>
        </div>
      </div>
      <div class="block-container">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">{{ $t('smt.Expressway') }}</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>
        <p class="express">{{ data.expressName }}</p>
      </div>
      <div class="block-container">
        <div class="title-wrap">
          <img src="@/assets/images/icons/icon-title.png" alt="" />
          <h2 class="title">{{ $t('om.Prices') }}</h2>
          <img src="@/assets/images/icons/icon-title.png" alt="" />
        </div>
        <div class="price">
          <div class="price-item">
            <p class="label">PCB价格：</p>
            ${{ data.pcbPrice || 0 }}
          </div>
          <div class="price-item">
            <p class="label">SMT价格：</p>
            ${{ data.smtPrice || 0 }}
          </div>
          <div class="price-item">
            <p class="label">BOM价格：</p>
            ${{ data.bomPrice || 0 }}
          </div>
          <div class="price-item">
            <p class="label">快递价格：</p>
            ${{ data.expressAmount || 0 }}
          </div>
          <div class="price-item">
            <p class="label">{{ $t('pcb.Taxes') }}：</p>
            $ 0
          </div>
          <div class="price-item blod-item">
            <p class="label">{{ $t('smt.Aggregate') }}：</p>
            ${{ data.totalPrice || 0 }}
          </div>
        </div>
      </div>
      <div class="flex">
        <el-button type="primary" @click="goBack">返回订单</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: center;
  padding-top: 32px;
}
.m-b-20 {
  margin-bottom: 20px;
}
.wrapper {
  background: #f5f5f5;
  padding: 32px 0 258px;
  .order-detail {
    border-radius: 8px;
    padding: 60px 32px;
    background: #fff;
    &.container {
      width: 1440px;
      margin: 0 auto;
    }

    .block-container {
      &:first-child {
        padding-bottom: 24px;
      }
      .title-wrap {
        display: flex;
        align-items: center;
        padding-bottom: 32px;
        > img {
          width: 16px;
        }
        .title {
          padding: 0 12px;
          color: #383838;
          font-size: 20px;
          font-weight: 700;
        }
      }

      .info-table {
        --el-table-header-text-color: #fff !important;
        --el-table-header-bg-color: var(--mall-color-primary) !important;
        --el-table-row-hover-bg-color: transparent;
      }

      .express {
        padding-bottom: 24px;
        color: #666666;
        font-size: 14px;
      }

      .price {
        &-item {
          padding-bottom: 16px;
          display: flex;
          align-items: center;
          color: #383838;
          font-size: 14px;
          > .label {
            width: 130px;
          }
          &.blod-item {
            padding-top: 6px;
            font-weight: 700;
          }
        }
      }
    }
  }
}
// ::v-deep .el-table {
// }

::v-deep .el-descriptions {
  &__cell {
    line-height: 19px !important;
  }
  &__label {
    color: #383838 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
}
</style>
